<template>
  <div id="app">
    <!-- 隐藏部分 -->
<div class="Frist" v-show="FristContext">
      <HideFrist />
</div>
<div class="Second" v-if="SecondContext">
      <HideSecond/>
</div>
    <!-- 头部 -->
<div class="Fixed-Frist" id="Fixed">
  <div class="Fixed">
      <Navtop />
      <!-- 中间部分 -->
      <router-view></router-view>
      <!-- 尾部 -->
      <Footer />
      </div>
</div>
  </div>
</template>

<script>
import Navtop from "../src/components/comcomponents/NavTop.vue";
import Footer from "../src/components/comcomponents/Footer.vue";
import HideFrist from "./components/Shopping/subcomponents/Context/HideContext/HideFrist.vue";
import bus from '../src/bus/index'
import HideSecond from './components/Shopping/subcomponents/Context/HideContext/HideSecond.vue';
export default {
  name: "App",
  components: {
    Navtop,
    Footer,
    HideFrist,
    HideSecond,
  },
  data() {
    return {
      scrollTopone:'',
      FristContext:false,
      SecondContext:false
    }
  },
  created() {
    // 接收contextFrist传递来的数据
    const that =this
    bus.$on("ChangefixScoend",(data,scroll)=>{
         
         var ChangeCss =document.getElementById('Fixed')
        //  判断是谁传递进来的参数
          that.SecondContext=data
        //  进行样式改变
        if (ChangeCss.classList.contains('Fixed-Frist')) {
          ChangeCss.classList.remove('Fixed-Frist')
          window.scrollTo(0,scroll);
            ChangeCss.classList.add('Fixed-Second')
            ChangeCss.style.top='-'+scroll+'px'
            this.scrollTopone=scroll
        }
    })
    // 接收ContextScoend传递进来的参数
        bus.$on("Changefix",(data,scroll)=>{
         
         var ChangeCss =document.getElementById('Fixed')
        //  判断是谁传递进来的参数
          that.FristContext=data
        //  进行样式改变
        if (ChangeCss.classList.contains('Fixed-Frist')) {
          ChangeCss.classList.remove('Fixed-Frist')
          window.scrollTo(0,scroll);
            ChangeCss.classList.add('Fixed-Second')
            ChangeCss.style.top='-'+scroll+'px'
            this.scrollTopone=scroll
        }
    })
    // 接收HideFrist传递进来的数据
    bus.$on('Cancel',(data)=>{
         var ChangeCss =document.getElementById('Fixed')

          that.FristContext=false
          that.SecondContext=false
        // 点击X更改样式
        if (ChangeCss.classList.contains('Fixed-Second')) {
          ChangeCss.classList.remove('Fixed-Second')
          ChangeCss.classList.add('Fixed-Frist')
          // 关闭后，主页面的滑轮高度保持不变
          window.scrollTo(0,this.scrollTopone)
        }
    })
  },
};
</script>

<style lang="less" scoped>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  width: 100%;
.Fixed-Frist{
  // position: fixed;
  width: 100%;
}
.Fixed-Second{
   position: fixed; 
   width: 100%;
}
}
</style>